<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<body>

	<div th:fragment="header">
		<a th:href="@{/}"> <img th:src="@{/images/spitter_logo_50.png}"
			border="0"></img></a> <a th:href="@{/logout}">Logout</a>
	</div>
	border:5px solid red;
	<div th:fragment="copy">Copyright &copy; Kelly Feng</div>



	<div th:fragment="layout" data-options="region:'north',border:false"
		style="height: 80px; background: #B3DFDA; padding: 0px; text-align: center;">
		<h2>
			<b>Spittr System</b>
		</h2>
		<div sec:authorize="isAuthenticated()"
			style="font-size: 15px; width: 90%; text-align: right;">
			欢迎您,<span sec:authentication="name">user-name</span> <a
				th:href="@{/logout}">注销</a>
		</div>
	</div>
	<div th:fragment="layout"
		data-options="region:'west',split:true,title:'菜单'"
		style="width: 150px; padding: 0px;">
		<div class="easyui-accordion" style="width: 100%; height: 100%;">
			<div title="首页" data-options="iconCls:'icon-ok'" style="padding: 0;">
				<ul class="easyui-tree"
					data-options="iconCls:'icon-search',animate:true">
					<li data-options="iconCls:'icon-add'"><span>Fruits</span>
						<ul>
							<li data-options="iconCls:'icon-remove'"><a
								th:href="@{/spittles}">Spittles</a></li>
							<li data-options="iconCls:'icon-remove'"><a
								th:href="@{/spittles}">Spittles</a></li>
						</ul></li>
					<li data-options="iconCls:'icon-add'"><span>Vegetables</span>
						<ul>
							<li><a id="test1" href="javascript:void(0)">test1</a></li>
							<li><a id="ajax" href="/ajax">ajax</a></li>
							<li>cabbage</li>
							<li>potato</li>
							<li>lettuce</li>
						</ul></li>
				</ul>
			</div>
			<div title="关于" data-options="iconCls:'icon-tip'"
				style="overflow: auto; padding: 10px;">
				<h3 style="color: #0099FF;">Accordion for jQuery</h3>
				<a th:href="@{/spittles}">Spittles</a> <br></br> <a
					th:href="@{/login}">flogins</a> <br></br>

			</div>
			<div title="Help" data-options="iconCls:'icon-help'"
				style="padding: 10px;">
				<p>The accordion allows you to provide multiple panels and
					display one or more at a time. Each panel has built-in support for
					expanding and collapsing. Clicking on a panel header to expand or
					collapse that panel body. The panel content can be loaded via ajax
					by specifying a 'href' property. Users can define a panel to be
					selected. If it is not specified, then the first panel is taken by
					default.</p>
			</div>

		</div>
	</div>
	<div th:fragment="layout"
		data-options="region:'east',split:true,collapsed:true,title:'工具'"
		style="width: 100px; padding: 10px;">工具</div>
	<div th:fragment="layout" data-options="region:'south',border:false"
		style="height: 40px; background: #B3DFDA; padding: 10px; text-align: right;">
		<span style="font-size: 15px">disign by kellyfeng</span>
	</div>
	<script>
		$(document).ready(function() {
			$("#test1").click(function() {
				//////////////////////////////

				//////////////////////////////					
			});
		});

		function ftFormatTime(val, row) {
			return timeFormat(new Date(val));
		}
	</script>
</body>
</html>